import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import route from './plugins/@vite-plugin-route'
import { interpolateName } from 'loader-utils'
import { resolve } from 'path'
import { autoFixContext } from 'react-activation'

autoFixContext(
  [require('react/jsx-runtime'), 'jsx', 'jsxs', 'jsxDEV'],
  [require('react/jsx-dev-runtime'), 'jsx', 'jsxs', 'jsxDEV']
)

export default defineConfig({

  server: {
    proxy: {
      '/api': {
        target: 'http://192.168.110.106:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  },

  resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve('./src')
      },
      {
        find: /^~/,
        replacement: ''
      }
    ]
  },

  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      }
    },
    modules: {
      localsConvention: 'camelCaseOnly',
      generateScopedName: function (name, fileName, css) {

        if (/container$/.test(name)) {
          const hash = interpolateName({
            resourcePath: fileName
          }, "[hash:5]", {
            content: css
          })
          return `${name}-${hash}`
        }
        return name
      },
    }
  },

  plugins: [
    react({
      babel: {
        plugins: [
          [
            "@babel/plugin-proposal-decorators",
            {
              legacy: true
            }
          ],
          "@babel/plugin-proposal-class-properties"
        ]
      }
    }),
    route()
  ],
})
